<template>
  <view class="main p-30">
    <view style="padding-bottom: 176rpx">
      <CommentCard
        :showMessage="false"
        :showTel="false"
        :showShare="true"
        :isMargin="true"
        :isShowLabel="true"
        :item="detailData"
        @reload="getDetail"
        :isShowManage="false"
        :isShowOption="true"
        @option="handleOption"
        :newRdios="1"
      />
      <view
        class="stack common dispaly-just-between"
        v-if="detailData.likeList && !radios"
      >
        <imageStack :data="detailData.likeList" />
        <view class="his-star">历史点赞</view>
      </view>
      <view
        class="product common"
        v-if="handleProductList.length"
        style="margin-top: 20rpx"
      >
        <view class="product-list">
          <view
            class="product-item dispaly-just-between"
            v-for="(item, index) in handleProductList"
            :key="index"
          >
            <view class="item dispaly-col-center">
              <view class="item-title">品牌</view>
              <view class="item-desc">{{ item.brand }}</view>
            </view>
            <view class="item dispaly-col-center">
              <view class="item-title">产品/服务</view>
              <view class="item-desc">{{ item.name }}</view>
            </view>
            <view class="item dispaly-col-center">
              <view class="item-title">数量</view>
              <view class="item-desc">{{ item.num }}</view>
            </view>
          </view>
        </view>
        <view class="s-icon dispaly-align-center" @click="handleProduct">
          <image
            :src="
              isUp
                ? 'https://qunyin.hihink.com/icon/up.svg'
                : 'https://qunyin.hihink.com/icon/down.svg'
            "
            mode="widthFix"
          />
        </view>
      </view>
      <!-- source 0 不收费 12 收费 -->
      <view
        class="comment common"
        v-if="
          detailData.source == 0 ||
          ((commentFeeNumber == 0 || showNum == 1) &&
            detailData.commentList?.length) ||
          (detailData.createUser == userInfo.userId && !radios)
        "
      >
        <view class="common-title"
          >评论（{{ detailData.commentList?.length || 0 }}）</view
        >
        <view class="com">
          <view
            class="con-item"
            v-for="(item, index) in detailData?.commentList"
            :key="index"
          >
            <view class="user-name">{{ item.createName }}：</view>
            <view class="user-com">{{ item.content }}</view>
            <view
              class="del"
              @click="deleteComment(item)"
              v-if="
                userInfo.userId == item.createUser ||
                (commentList.includes(userInfo.userId) &&
                  item.createUser != groupId)
              "
            >
              删除</view
            >
          </view>
        </view>
      </view>
      <!-- v-if="commentFeeNumber == 0 && showNum > 1" -->
      <view class="more common" v-if="!radios">
        <view class="more-top dispaly-just-between">
          <view class="more-left">
            <view class="title">购买群点开图片二维码</view>
            <view class="number"
              >{{ detailData.memberNum }}人加入
              {{ detailData.trendsNum }}篇动态</view
            >
          </view>
          <view class="cover">
            <image
              :src="detailData.qrCode"
              mode="aspectFill"
              v-if="joinIndex != -1"
            />
            <view class="buyy" v-else>
              <view>购买</view>
              <view>查看</view>
            </view>
          </view>
        </view>
        <view class="detail dispaly-align-center" @click="lookGroupCode"
          >查看群详情</view
        >
      </view>
      <view class="notice" v-if="isAdmin == 1 || isGroup == 1">
        <Button
          v-if="!radios"
          text="广播给群成员"
          :block="true"
          @clickButton="broadcastPerson"
          :loading="gLoading"
          loading-text="加载中"
        />
      </view>

      <view class="tip" v-if="detail">
        <view class="title-block dispaly-center">
          <view class="title-line"></view>
          <view class="title-text">推荐规则</view>
        </view>
        <view>
          <rich-text :nodes="detail"></rich-text>
        </view>
      </view>
    </view>
  </view>

  <!-- v-if="commentFeeNumber == 0 || showNum > 1" -->
  <!-- showPay -->
  <view class="btn-box dispaly-center" v-if="type == 1">
    <view class="com-box dispaly-just-between">
      <view class="ipt">
        <input
          type="text"
          style="width: 550rpx"
          placeholder="评论"
          @focus="focus"
        />
      </view>
      <view class="send dispaly-align-center" @click="focus">评论</view>
    </view>
  </view>
  <template v-else>
    <view class="btn-box dispaly-center" v-if="isComment">
      <view class="com-box dispaly-just-between">
        <view class="ipt">
          <input type="text" placeholder="评论" @focus="focus" />
        </view>
        <view class="send dispaly-align-center" @click="focus">评论</view>
        <view
          style="margin-left: 20rpx; color: #2352f4; font-weight: 700"
          @click="isComment = false"
        >
          <image
            src="https://qunyin.hihink.com/icon/q.svg"
            mode="aspectFill"
            style="width: 35rpx; height: 35rpx"
          />
        </view>
      </view>
    </view>
    <view class="btn-box dispaly-center" v-else>
      <!-- <view style="margin-right: 20rpx;color: #2352f4;font-weight: 700;">评论</view> -->
      <view class="tel dispaly-col-center" @click="showModalBox">
        <image src="/static/icon/pl1.png" mode="aspectFill" />
        <view class="tel-text">评论</view>
      </view>
      <!-- <view class="tel dispaly-col-center" @click="callOwner">
        <image src="/static/icon/mesg1.png" mode="aspectFill" />
        <view class="tel-text">发布者</view>
      </view> -->
      <view class="btn" style="margin-left: 20rpx">
        <Button
          @clickButton="addGroup"
          :loading="loading"
          loading-text="加载中"
          text="进入圈子"
          :block="false"
          v-if="joinIndex == -1"
        />
        <Button
          @clickButton="
            $goUrl(
              `/pages/circle/pages/groupConsole?id=${detailData?.circleId}`
            )
          "
          v-else
          text="进入圈子"
          :block="false"
        />
      </view>
    </view>
  </template>

  <!-- 群二维码 -->
  <van-popup v-model:show="codeShow" style="background-color: transparent">
    <view class="code-main">
      <view class="icon" @click="codeShow = false">
        <van-icon name="cross" color="#fff" size="30" />
      </view>
      <image :src="detailData.qrCode" mode="aspectFill" />
    </view>
  </van-popup>

  <!-- 删除评论提示 -->
  <van-dialog
    v-model:show="deleteComemntShow"
    title="提示"
    show-cancel-button
    message="确认删除评论吗？"
    @confirm="confirmDeleteComment"
  >
  </van-dialog>

  <!-- 评论弹窗 -->
  <van-popup round v-model:show="commentShow" position="bottom">
    <view class="pop-com">
      <view class="content">
        <textarea
          class="text-a"
          placeholder="请输入评论内容..."
          v-model="content"
        ></textarea>
      </view>
      <view class="com-bottom dispaly-just-between">
        <view class="cancel" @click="commentShow = false">取消</view>
        <view class="send dispaly-align-center" @click="comment">发送</view>
      </view>
    </view>
  </van-popup>
  <!-- 操作 -->
  <van-action-sheet
    v-model:show="optionShow"
    :actions="optionActions"
    @select="optionOnSelect"
    cancel-text="取消"
    @cancel="optionShow = false"
  />

  <van-popup v-model:show="callShow" round="8">
    <view
      class="pop-main dispaly-col-center"
      style="padding: 30rpx; border-radius: 20px"
    >
      <image :src="consultImg" mode="aspectFill" />
      <view class="tip" style="margin-top: 30rpx">{{ consultTig }}</view>
    </view>
  </van-popup>
</template>

<script setup>
import CommentCard from "@/components/commentCard/commentCard.vue";
import imageStack from "@/components/imageStack/imageStack.vue";
import { ref, reactive } from "vue";
import {
  dynamicDetail,
  postComment,
  broadcast,
  proxy,
  getUserInfo,
  deleteCommentData,
  report,
  showTel,
  buyHomeShow,
  addCircle,
  getMemberPage,
} from "@/api/apiList";
import { onLoad } from "@dcloudio/uni-app";

const isComment = ref(false);

const id = ref(-1);
const type = ref("");
const isAdmin = ref("");
const isGroup = ref("");
const radios = ref();
const commentList = ref([]);
const joinIndex = ref(-1);
const circleInfos = ref({});
const groupId = ref(0);

onLoad(async (option) => {
  type.value = option.type ? option.type : "";
  id.value = option.id;
  isAdmin.value = option.isAdmin ? option.isAdmin : "";
  isGroup.value = option.isGroup ? option.isGroup : "";
  radios.value = option.radio;
  init();
});
const init = async () => {
  await getDetail();
  await user();
  await getUser();
  await getRemodRules();
  await getMember();
};

const userInfo = ref({});

// 点击评论
const showModalBox = () => {
  if (joinIndex.value == -1) {
    return uni.showModal({
      title: "温馨提示",
      content: "您还没有加入圈子，评论需要加入圈子，立即前往?",
      showCancel: true,
      cancelText: "取消",
      confirmText: "确定",
      success: (result) => {
        if (result.confirm) {
          // 跳转圈子详情
          uni.navigateTo({
            url:
              "/pages/index/pages/groupDetail?id=" + detailData.value.circleId,
          });
        }
      },
    });
  }
  isComment.value = true;
};

const getMember = async () => {
  const response = await getMemberPage({
    circleId: detailData.value.circleId,
    pageNum: 1,
    pageSize: 999,
    type: 0,
  });
  if (response && response?.code == 200) {
    // 用于判断是否可以删除
    if (response.rows && response.rows.length > 1) {
      let arr = [];
      response.rows.forEach((item) => {
        //item.isGroup ||
        if (item.isAdmin) {
          arr.push(item.userId);
        }

        if (item.isGroup) {
          groupId.value = item.userId;
        }
      });
      commentList.value = arr;
    }
  }
};

const user = async () => {
  const res = await getUserInfo(); // showNum > 1 不用付钱
  if (res.code == 200) {
    userInfo.value = res.data;
    const circleIds = userInfo.value.circleIds;
    if (circleIds) {
      if (circleIds.length) {
        joinIndex.value = circleIds.findIndex(
          (item) => item == detailData.value.circleId
        );
      }
    }
    console.log(circleIds, "user");
    console.log(detailData.value.circleId);
  }
};

// copy
const copy = () => {
  if (detailData.value.wx) {
    uni.setClipboardData({
      data: detailData.value.wx, //要被复制的内容
      success: () => {
        //复制成功的回调函数
        uni.showToast({
          //提示
          title: "复制成功",
        });
      },
    });
  } else {
    uni.showToast({
      title: "群主没有设置微信",
      icon: "none",
    });
  }
};

// 获取是否收费
const commentFeeNumber = ref("");
const showNum = ref("");
const showPay = ref(false);
const getUser = async () => {
  const result = await proxy("commentFee"); // 0不需要付钱直接看 1调用user
  const { commentFee } = result.data;
  commentFeeNumber.value = commentFee;
  const index = userInfo.value.circleIds.findIndex(
    (item) => item == detailData.value.circleId
  );
  if (index != -1) {
    showPay.value = true;
  }
  if (commentFeeNumber.value > 0) {
    const res = await showTel({ trendsId: id.value }); // showNum > 1 不用付钱
    if (res.code == 200) {
      console.log(res, "showT");
      showNum.value = res.data;
      // userInfo.value = res.data
    }
  }
};

// 获取详情
const productList = ref([]);
const detailData = ref({});
const consultImg = ref();
const consultTig = ref();
const getDetail = async () => {
  const res = await dynamicDetail({ id: id.value });
  if (res.code == 200) {
    detailData.value = res.data;
    consultImg.value = res.data.wxQrCode;
    consultTig.value = res.data.wx;
    // getData(res.data.circleId);
    console.log(res.data);
    if (detailData.value.products) {
      if (detailData.value.products.length) {
        productList.value = detailData.value.products;
        handleProductList.value = productList.value.slice(0, 2);
      }
    }
  }
};

// const detailData = ref({});
// const getData = async (ids) => {
//   const res = await circleBaseInfo({ id: ids });
//   if (res.code == 200) {
//     detailData.value = res.data;
//     // consultImg.value = res.data.wxQrCode;
//     // consultTig.value = res.data.wx;
//     detailData.value.brief = detailData.value?.brief?.replace(
//       /\<img/gi,
//       '<img style="max-width:100%;height:auto" '
//     );
//   }
// };

// 删除评论
const commentId = ref("");
const deleteComment = (item) => {
  commentId.value = item.id;
  deleteComemntShow.value = true;
};

const confirmDeleteComment = async () => {
  const res = await deleteCommentData(commentId.value);
  if (res.code == 200) {
    uni.showToast({
      title: "删除成功",
      icon: "none",
    });
    await getDetail();
  }
};

// 查看群二维码
const lookGroupCode = () => {
  // console.log(commentFeeNumber.value, showNum.value)
  // const circleIds = userInfo.value.circleIds
  // if (circleIds.length) {
  //   joinIndex.value = circleIds.findIndex(item => item == detailData.value.circleId)
  // }
  console.log(joinIndex.value, "joinIndex.value");

  return uni.navigateTo({
    url: `/pages/index/pages/groupDetail?id=${detailData.value.circleId}`,
  });

  if (joinIndex.value != -1) {
    uni.navigateTo({
      url: `/pages/index/pages/groupDetail?id=${detailData.value.circleId}`,
    });
    // codeShow.value = true;
  } else {
    uni.showToast({
      title: "请先购买",
      icon: "none",
    });
  }
};

// 评论
const content = ref("");
const comment = async () => {
  const res = await postComment({
    content: content.value,
    trendsId: detailData.value.id,
  });

  if (res.code == 200) {
    commentShow.value = false;
    uni.showToast({
      title: "评论成功",
      icon: "none",
    });
    content.value = "";
    getDetail();
  }
};

// 广播给群成员
const gLoading = ref(false);
const broadcastPerson = async () => {
  gLoading.value = true;
  const res = await broadcast({ id: detailData.value.id });
  if (res.code == 200) {
    uni.showToast({
      title: "广播成功",
      icon: "none",
    });
    gLoading.value = false;
  }
};

const commentShow = ref(false);
const focus = () => {
  commentShow.value = true;
  uni.hideKeyboard();
};

// 推荐规则
const detail = ref(``);

// 获取推荐规则
const getRemodRules = async () => {
  const res = await proxy("recommend");
  if (res.code == 200) {
    detail.value = res.data.recommend;
  }
};

const codeShow = ref(false);

const loading = ref(false);
const addGroup = async () => {
  return uni.navigateTo({
    url: `/pages/index/pages/groupDetail?id=${detailData.value.circleId}`,
  });
  const res = await addCircle({ circleId: detailData.value.circleId });
  loading.value = true;
  if (res.code == 200) {
    uni.showToast({
      title: "支付成功",
      icon: "none",
    });
    loading.value = false;
    init();
  }
};

const isUp = ref(true);
const handleProductList = ref([]);
const handleProduct = () => {
  isUp.value = !isUp.value;
  handleProductList.value =
    isUp.value == false ? productList.value.slice(0, 2) : productList.value;
};

// 删除评论
const deleteComemntShow = ref(false);

const optionActions = ref([{ name: "举报", type: 1 }]);
const optionShow = ref(false);
const reportBusinessId = ref("");
const handleOption = (businessId) => {
  console.log(businessId);
  optionShow.value = true;
  reportBusinessId.value = businessId;
};

// 举报
const reportData = reactive({
  type: 1,
  businessId: "",
});
const optionOnSelect = async (data) => {
  reportData.businessId = reportBusinessId.value;
  const res = await report(reportData);
  if (res.code == 200) {
    uni.showToast({
      title: "举报成功",
      duration: 2000,
      icon: "none",
    });
    optionShow.value = false;
  }
  console.log(data, "data");
};

const callShow = ref(false);
const callOwner = () => {
  // if (isPay.value != -1 || detailData.value.serviceFee == null || detailData.value.serviceFee == 0) {
  callShow.value = true;
  // } else {
  //     uni.showToast({
  //         title: '您尚未加入圈子',
  //         icon: 'none'
  //     })
  // }
};
</script>

<style lang="scss" scoped>
:deep(.van-popup) {
  // background-color: #fff !important;
}

.common {
  padding: 20rpx;
  border-radius: 16rpx;
  background: #ffffff;
}

.mian {
  padding-bottom: 176rpx;
}

.pop-com {
  padding: 30rpx;

  .content {
    .text-a {
      width: 100%;
      height: 316rpx;
      border: 1rpx solid #dddddd;
      border-radius: 8rpx;
      padding: 26rpx 0 0 10rpx;
    }
  }

  .com-bottom {
    margin-top: 30rpx;

    .cancel {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      color: #bbbbbb;
    }

    .send {
      margin-left: 10rpx;
      height: 68rpx;
      width: 240rpx;
      background-color: #0753fd;
      border-radius: 8rpx;
      font-family: PingFang SC Medium;
      font-size: 26rpx;
      color: #ffffff;
    }
  }
}

.btn-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  height: 166rpx;
  padding: 0 30rpx;

  .tel {
    flex: 1;

    .tel-text {
      font-size: 28rpx;
      margin-top: 10rpx;
    }

    image {
      width: 35rpx;
      height: 35rpx;
    }
  }

  .btn {
    flex: 4;
  }

  .com-box {
    .ipt {
      input {
        width: 480rpx;
        height: 80rpx;
        border-radius: 8rpx;
        background: #f6f6f6;
        padding: 0 20rpx;
      }
    }

    .send {
      margin-left: 10rpx;
      height: 80rpx;
      width: 116rpx;
      background-color: #0753fd;
      border-radius: 8rpx;
      font-family: PingFang SC Medium;
      font-size: 26rpx;
      color: #ffffff;
    }
  }
}

.stack {
  margin-top: 40rpx;
  margin-bottom: 20rpx;

  .his-star {
    font-family: PingFang SC Regular;
    font-size: 24rpx;
    font-weight: normal;
    color: #111111;
  }
}

.tip {
  margin-top: 20rpx;
}

.comment {
  margin-bottom: 20rpx;

  .comment-title {
    font-family: PingFang SC Regular;
    font-size: 30rpx;
    color: #999999;
  }

  .com {
    .con-item {
      margin: 10rpx 0;
      display: flex;

      .user-name,
      .user-com,
      .del {
        font-family: PingFang SC Regular;
        font-size: 26rpx;
        font-weight: normal;
      }

      .user-name {
        color: #0753fd;
      }

      .user-com {
        color: #111111;
        margin-right: 16rpx;
        max-width: 70%;
      }

      .del {
        color: #fd0f07;
      }
    }
  }
}

.product {
  margin-bottom: 20rpx;

  .s-icon {
    margin-top: 40rpx;

    image {
      width: 32rpx;
      height: 20rpx;
    }
  }

  .product-list {
    .product-item:last-child {
      margin-bottom: 0;
    }

    .product-item {
      margin-bottom: 40rpx;

      .item {
        .item-title {
          font-family: PingFang SC Bold;
          font-size: 32rpx;
          font-weight: 700;
          color: #111111;
        }

        .item-desc {
          font-family: PingFang SC Medium;
          font-size: 26rpx;
          color: #777777;
        }
      }
    }
  }
}

.more {
  margin-bottom: 20rpx;

  .more-top {
    .more-left {
      .title {
        font-family: PingFang SC Bold;
        font-size: 32rpx;
        color: #111111;
        font-weight: 700;
      }
    }

    .cover {
      image {
        width: 110rpx;
        height: 110rpx;
        border-radius: 12rpx;
      }

      .buyy {
        width: 110rpx;
        height: 110rpx;
        border-radius: 12rpx;
        background-color: #0753fd;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #fff;
        font-weight: 900;
      }
    }
  }

  .detail {
    margin-top: 40rpx;
    padding: 32rpx 0;
    border: 2rpx solid #0753fd;
    border-radius: 15rpx;
    font-family: PingFang SC Medium;
    font-size: 26rpx;
    font-weight: 700;
    color: #0753fd;
  }
}

.code-main {
  .icon {
    text-align: right;
    margin-bottom: 20rpx;
  }

  image {
    width: 750rpx;
    height: 750rpx;
  }
}

// :deep(.van-popup) {
//     background-color: transparent;
// }
</style>
